<template>
  <div class="publish-container">
    <div class="van-ellipsis publish-tip"><span class="publish-tip-logo">代</span>发布你的代课信息，寻找帮太子读书的人</div>
    <van-popup v-model="startTimeshow"
               position="bottom"
               :overlay="true">
      <van-datetime-picker @cancel="handleCancelPickerTime"
                           @confirm="handleConfirmPickerTime"
                           v-model="currentDate"
                           type="datetime"
                           :min-date="minDate" />
    </van-popup>
    <van-cell-group class="pulish-item">
      <van-field center
                 clearable
                 label="开课时间"
                 left-icon="clock-o"
                 placeholder="请选择开课时间"
                 v-model="publisher.courseTime"
                 @click="startTimeshow = true">
      </van-field>
    </van-cell-group>
    <van-cell-group class="pulish-item">
      <van-field v-model="publisher.school"
                 label="学校名称"
                 disabled
                 left-icon="contact" />
    </van-cell-group>
    <van-cell-group class="pulish-item">
      <van-field v-model="publisher.courseName"
                 label="课程名称"
                 left-icon="contact" />
    </van-cell-group>
    <van-cell-group class="pulish-item">
      <van-field v-model="publisher.courseClass"
                 label="上课学时"
                 left-icon="contact" />
    </van-cell-group>
    <van-cell-group class="pulish-item">
      <van-field v-model="publisher.coursePlace"
                 label="上课地点"
                 left-icon="location" />
    </van-cell-group>
    <van-cell-group class="pulish-item-tip">
      是否分享以下信息给代课人
    </van-cell-group>
    <van-cell-group class="pulish-item checkbox">
      <van-field v-model="publisher.account"
                 placeholder="请输入姓名"
                 label="姓名"
                 disabled
                 left-icon="contact" />
      <van-checkbox v-model="publisher.hasName" />
    </van-cell-group>

    <van-cell-group class="pulish-item checkbox">
      <van-field v-model="publisher.studentId"
                 placeholder="请输入学号"
                 label="学号"
                 disabled
                 left-icon="exchange" />
      <van-checkbox v-model="publisher.hasStuId" />
    </van-cell-group>

    <van-cell-group class="pulish-item checkbox">
      <van-field type="tel"
                 v-model="publisher.phone"
                 placeholder="请输入电话号码"
                 label="电话"
                 disabled
                 left-icon="phone" />
      <van-checkbox v-model="publisher.hasPhone" />
    </van-cell-group>

    <van-cell-group class="pulish-item checkbox">
      <van-field type="number"
                 v-model="publisher.reward"
                 placeholder="请输入代课赏金"
                 label="赏金"
                 left-icon="gold-coin" />
      <van-checkbox v-model="publisher.hasReward" />
    </van-cell-group>

    <van-cell-group class="pulish-item checkbox">
      <van-field type="textarea"
                 v-model="publisher.remark"
                 placeholder="请输入备注信息"
                 label="备注"
                 left-icon="pending-orders" />
    </van-cell-group>

    <van-button class="btn-publish"
                @click="handlePublish"
                size="small">确认发布</van-button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      startTimeshow: false,
      minDate: new Date(),
      currentDate: new Date(),
      publisher: {
        courseTime: '',
        school: '',
        courseName: '',
        courseClass: '',
        coursePlace: '',
        userName: '',
        hasName: '',
        studentId: '',
        hasStuId: '',
        phone: '',
        hasPhone: '',
        reward: '',
        hasReward: '',
        remark: ''
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.mine.user
    })
  },
  mounted () {
    this.handleInit()
  },
  methods: {
    handleInit () {
      this.publisher = Object.assign({}, this.publisher, this.user)
    },
    handleConfirmPickerTime () {
      debugger
      if (this.currentDate !== '') {
        let date = new Date(this.currentDate)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        month = month > 10 ? month : '0' + month
        let day = date.getDate()
        day = day > 10 ? day : '0' + day
        let hours = date.getHours()
        hours = hours > 10 ? hours : '0' + hours
        let min = date.getMinutes()
        min = min > 10 ? min : '0' + min
        let second = date.getSeconds()
        second = second > 10 ? second : '0' + second
        this.publisher.courseTime = year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + second
      }
      this.startTimeshow = false
    },
    handleCancelPickerTime () {
      this.startTimeshow = false
    },
    handlePublish () {
      const data = Object.assign({}, this.publisher, this.user)
      console.log(data)
    }
  }
}
</script>

<style lang="sass" scoped>
  .publish-container
    margin: 12px
    line-height: 24px
    background-color: #fff
    color: #323233
    font-size: 14px
    .publish-tip
      font-weight: 500
      line-height: 16px
      vertical-align: middle
      .publish-tip-logo
        background-color: #000
        color: #fff
        font-size: 12px
        line-height: 24px
        border-radius: 2px
        margin-right: 4px
    .pulish-item
      .van-cell
        padding-left: 0px
        padding-right: 0px
    .pulish-item-tip
      padding: 10px 0
      font-size: 12px
    .checkbox
      display: flex
      align-items: center
      .van-checkbox
        width: 23px
    .share-item
      padding: 10px 0
      line-height: 24px
      background-color: #fff
      color: #323233
      font-size: 14px
    .btn-publish
      display: block
      margin: 10px auto
</style>
